<template>
    <fieldset>
        <legend>ref在vue3中的变化之一</legend>
        <ul>
            <li v-for="item1 in [1, 2, 3, 4, 5]" :ref="handleRef" :index="item1">
                {{ item1 }}
            </li>
        </ul>
    </fieldset>
</template>
<script>
//ref在批量引用的时候,如果是v-for套v-for 性能比较低,推荐的做法是给ref绑定一个函数
export default {
    data() {
        return {
            lis: []
        }
    },
    methods: {
        //这个函数动态的绑定到了ref的表达式,v-for创建一个,那么函数会被调用一次,并且接受引用的内容
        handleRef(refs) {
            console.log(refs)
            let index = refs.getAttribute('index');
            if (index == 1 || index == 5) {
                this.lis.push(refs)
            }
        }
    },
    mounted() {
        console.log(this.lis)
    }
}
</script>